<template>
  <el-card class="mt-10">
    <el-form>
      <el-form-item label="属性名" size="small">
        <el-input
          v-model="$store.state.attr.attrName"
          placeholder="请输入属性名"
          class="wd-280"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="small"
          :disabled="!attrName"
          @click="addAttrValue"
          >添加属性值</el-button
        >
      </el-form-item>
      <el-form-item>
        <el-table class="mb-10" :data="attrValueList">
          <el-table-column label="序号" type="index" align="center" />
          <el-table-column label="属性值名称">
            <template v-slot="{ row, $index }">
              <el-input
                v-if="showInput"
                ref="inputFocus"
                v-model="row.valueName"
                @blur="shiftShow(row, $index)"
              />
              <div v-else @click="shiftEdit">{{ row.valueName }}</div>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template v-slot="{ row, $index }">
              <el-button
                icon="el-icon-delete"
                size="small"
                type="danger"
                @click="deleteAttrValue(row, $index)"
              />
            </template>
          </el-table-column>
        </el-table>
        <el-button type="primary" size="small" @click="sendAddInfo"
          >确定</el-button
        >
        <el-button size="small" @click="ShowAddOrUpdate">取消</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
import { nextTick } from 'process'
import { mapState } from 'vuex'
import { GetAddAttrInfoListUrl } from '@/api/product/attr'
export default {
  name: 'AddOrUpdate',
  data() {
    return {
      inputKey: '',
      showInput: Boolean
    }
  },
  computed: {
    ...mapState({
      attrName: (state) => state.attr.attrName,
      id: (state) => state.attr.id,
      isEdit: (state) => state.attr.isEdit,
      category3Id: (state) => state.category.category3Id,
      attrValueList: (state) => state.attr.attrValueList
    })
  },
  methods: {
    addAttrValue() {
      const inputObj = {
        valueName: this.valueName,
        showInput: this.showInput
      }
      this.attrValueList.push(inputObj)
      this.showInput = true
      nextTick(() => {
        this.$refs.inputFocus.focus()
      })
    },
    // 切换显示
    shiftShow(row, index) {
      this.showInput = false
      if (!row.valueName) {
        console.log(111)
        this.attrValueList.splice(index, 1)
      }
    },
    // 切换编辑模式
    shiftEdit(row, index) {
      this.showInput = true
      nextTick(() => {
        this.$refs.inputFocus.focus()
      })
    },
    // 删除属性值
    deleteAttrValue(index) {
      this.attrValueList.splice(index, 1)
    },
    // 添加属性
    async sendAddInfo({ attrName, category3Id, categoryLevel, attrValueList }) {
      try {
        await GetAddAttrInfoListUrl({
          attrName: this.attrName,
          attrValueList: [...this.attrValueList],
          category3Id: this.category3Id,
          categoryLevel: 3,
          id: this.id
        })
        this.ShowAddOrUpdate()
        alert('添加成功')
      } catch (error) {
        alert('添加失败')
      }
    },
    // 切换到list页面
    ShowAddOrUpdate() {
      this.$emit('showAttrList', true)
    }
  }
}
</script>

<style lang="less" scoped>
</style>
